<template>
    <div class="icon-picker">
      <!-- 触发图标选择器的按钮 -->
      <el-popover
        placement="bottom"
        width="400"
        trigger="click"
        v-model:visible="visible"
      >
        <template #reference>
          <el-button>
            <component :is="selectedIcon" v-if="selectedIcon" :style="iconStyle" />
            <span v-else>选择图标</span>
          </el-button>
        </template>
  
        <!-- 图标选择器内容 -->
        <div class="icon-picker-content">
          <!-- 搜索框 -->
          <el-input
            v-model="searchText"
            placeholder="搜索图标"
            clearable
            @input="handleSearch"
          />
  
          <!-- 分页器 -->
          <el-pagination
            small
            layout="prev, pager, next"
            :total="filteredIcons.length"
            :page-size="pageSize"
            :current-page="currentPage"
            @current-change="handlePageChange"
          />
  
          <!-- 图标网格 -->
          <div class="icon-grid">
            <div
              v-for="icon in paginatedIcons"
              :key="icon"
              class="icon-item"
              @click="selectIcon(icon)"
            >
              <component :is="icon" :style="iconStyle" />
              <span class="icon-name">{{ icon }}</span>
            </div>
          </div>
        </div>
      </el-popover>
    </div>
  </template>
  
  <script setup>
  import { ref, computed, watch } from 'vue';
  import * as ElementPlusIconsVue from '@element-plus/icons-vue';
  
  // 定义 props
  const props = defineProps({
    modelValue: {
      type: String,
      default: '',
    },
    iconSize: {
      type: String,
      default: '24px',
    },
    iconColor: {
      type: String,
      default: '#000',
    },
  });
  
  // 定义 emits
  const emit = defineEmits(['update:modelValue', 'change']);
  
  // 当前选中的图标
  const selectedIcon = ref(props.modelValue);
  
  // 控制 popover 的显示状态
  const visible = ref(false);
  
  // 所有图标列表
  const icons = Object.keys(ElementPlusIconsVue);
  
  // 搜索文本
  const searchText = ref('');
  
  // 分页相关
  const pageSize = 20; // 每页显示的图标数量
  const currentPage = ref(1);
  
  // 过滤后的图标列表
  const filteredIcons = computed(() => {
    return icons.filter((icon) =>
      icon.toLowerCase().includes(searchText.value.toLowerCase())
    );
  });
  
  // 分页后的图标列表
  const paginatedIcons = computed(() => {
    const start = (currentPage.value - 1) * pageSize;
    const end = start + pageSize;
    return filteredIcons.value.slice(start, end);
  });
  
  // 图标样式
  const iconStyle = computed(() => ({
    width: props.iconSize,
    height: props.iconSize,
    color: props.iconColor,
  }));
  
  // 监听 props.modelValue 的变化
  watch(
    () => props.modelValue,
    (newVal) => {
      selectedIcon.value = newVal;
    }
  );
  
  // 选择图标的方法
  const selectIcon = (icon) => {
    selectedIcon.value = icon;
    emit('update:modelValue', icon); // 更新 v-model
    emit('change', icon); // 触发 change 事件
    visible.value = false; // 关闭 popover
  };
  
  // 处理搜索
  const handleSearch = () => {
    currentPage.value = 1; // 搜索时重置到第一页
  };
  
  // 处理分页变化
  const handlePageChange = (page) => {
    currentPage.value = page;
  };
  </script>
  
  <style scoped>
  .icon-picker {
    display: inline-block;
  }
  
  .icon-picker-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .icon-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
  }
  
  .icon-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    cursor: pointer;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: background-color 0.3s;
  }
  
  .icon-item:hover {
    background-color: #f5f5f5;
  }
  
  .icon-name {
    margin-top: 5px;
    font-size: 12px;
    text-align: center;
    word-break: break-all;
  }
  </style>